<template>
    <view class="home">
        <button @click="decrement">-</button>
        <view class="box-container">
            <BoxComponent v-for="id in boxCount" :key="id" :id="id" @click="openDetail(id)" />
        </view>
        <button @click="increment">+</button>
        <Page1 v-if="showDetail" :id="currentId" @close="showDetail = false" />
    </view>
</template>

<script>
import { ref, computed } from 'vue'; // 确保导入 ref 和 computed
import { useBoxStore } from '@/store/useBoxStore';
import BoxComponent from '@/components/BoxComponent.vue';
import Page1 from './page1.vue';

export default {
    components: { BoxComponent, Page1 },
    setup() {
        const boxStore = useBoxStore();
        const showDetail = ref(false);
        const currentId = ref(null);

        const openDetail = (id) => {
            currentId.value = id;
            showDetail.value = true;
        };

        return {
            boxCount: computed(() => boxStore.boxCount), // 使用 computed 计算属性
            increment: boxStore.increment, // 确保 increment 是一个函数
            decrement: boxStore.decrement, // 确保 decrement 是一个函数
            showDetail,
            currentId,
            openDetail,
        };
    },
};
</script>

<style scoped lang="scss">
.home {
    text-align: center;
    margin-top: 50px;
}

.box-container {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

button {
    margin: 0 10px;
    padding: 10px 20px;
    font-size: 16px;
}
</style>